<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_表格</title>
</head>
<body>
    <table border="1px" style="border-collapse:collapse; " >
        <caption>商品列表</caption>
        <!-- table row 表格行 -->
        <tr>
            <!-- table header 表头 -->
            <th width="200px">编号</th>
            <th width="150px">名称</th>
            <th width="100px">价格</th>
        </tr>
            <!--table data 单元格 存放数据的地方  -->
            <td style="text-align: center">1</td>
            <td>哪吒</td>
            <td>10</td>
        </tr>
        </tr>
            <td style="text-align: center">2</td>
            <td>敖丙</td>
            <td>10</td>
        </tr>
    </table> <br>

<table border="1px" >
    <tr>
        <th>1-1</th>
        <!-- 夸列：横着合并 从当前单元格开始，向右合并n格单元格，能包含当前单元格，被合并的单元格一定得删除-->
        <th colspan="3">1-2</th>
<!--        <th>1-3</th>-->
<!--        <th>1-4</th>-->
    </tr>
    <tr>
        <th>2-1</th>
        <th>2-2</th>
        <!-- 跨行：竖着合并 从当前单元格开始，向下合并n行，n包含当前单元格，被合并的行一定得删除</th>-->
        <th rowspan="3">2-3</th>
        <th>2-4</th>
    </tr>
    <tr>
        <th>3-1</th>
        <th>3-2</th>

<!--        <th>3-3</th>-->
        <th>3-4</th>
    </tr>
    <tr>
        <th>4-1</th>
        <th>4-2</th>
<!--        <th>4-3</th>-->
        <th>4-4</th>
    </tr>
</table><br>

    <table border="1px" style="border-collapse: collapse">
        <caption>购物车</caption>
        <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>商品价格</th>
        </tr>
        <tr>
            <td>1</td>
            <td>荣耀X60</td>
            <td>2601</td>
        </tr>
        <tr>
            <td>2</td>
            <td>三折叠 怎么折都有面</td>
            <td>27399</td>
        </tr>
        <tr>
            <td>总计</td>
            <td colspan="2">30000</td>
        </tr>
    </table>
</body>
</html>